.course-menu {
	position: relative;
	height: 100%;
	.dragger {
		position: absolute;
		right: -16px;
		top: calc(50% - 16px);
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: white;
		box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
		opacity: 0.2;
		transition: opacity 0.15s linear;
		cursor: w-resize;
		user-select: none;
		.draggerimg {
			width: 100%;
			height: 100%;
			background-image: url();
			background-size: 70%;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0.7;
		}
	}
	.dragger:hover {
		opacity: 1;
	}
	.welcome {
		overflow: hidden;
		transition: height cubic-bezier(0.15, 0.4, 0.5, 1) 0.3s;
		&>div {
			padding-top: 48px;
			padding-bottom: 32px;
			h2 {
				margin: unset;
				line-height: 56px;
				font-size: 20px;
				font-weight: unset;
				color: #333;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.hline {
				width: 100%;
				height: 1px;
				margin-top: 32px;
				background: linear-gradient(to right, hsla(0, 0%, 50%, 0), hsla(0, 0%, 50%, 0.5), hsla(0, 0%, 50%, 0));
			}	
		}
	}
	.menu {
		position: absolute;
		left: Max(calc(20% - 64px), 0.01px);
		right: Max(calc(20% - 64px), 0.01px);
		bottom: 0;
		transition: top cubic-bezier(0.15, 0.4, 0.5, 1) 0.5s;
		overflow: hidden;
		.chapter {
			width: 100%;
			.bar {
				position: relative;
				width: 100%;
				height: 56px;
				cursor: pointer;
				.title {
					position: absolute;
					left: 24px;
					right: 44px;
					line-height: 56px;
					font-size: 24px;
					text-align: left;
					transition: font-size linear 0.2s;
					overflow: hidden;
					white-space: nowrap;
				}
				.blueline {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: royalblue;
					transition: width cubic-bezier(0.15, 0.4, 0.5, 1) 0.3s;
				}
				.triangle {
					position: absolute;
					right: 24px;
					top: 20px;
					width: 16px;
					height: 16px;
				}
			}
			.content {
				width: 100%;
				overflow: hidden;
				transition: height ease 0.3s;
				.section {
					position: relative;
					width: 100%;
					height: 48px;
					cursor: pointer;
					.background {
						height: 100%;
						background-color: hsla(210deg, 80%, 80%, 0.3);
						transition: width ease 0.3s;
					}
					.title {
						position: absolute;
						top: 0;
						left: 24px;
						line-height: 48px;
						font-size: 16px;
						overflow: hidden;
						white-space: nowrap;
					}
					.grayline {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: hsla(0, 0%, 50%, 0.15);
					}
				}
			}
		}
	}
}